<template>
    <div>
        <el-select
            v-model="entryCode"
            filterable
            @change="setInputData"
            @visible-change="handleVisibleChange"
            :placeholder="placeholder"
            :filter-method="getstockCodeList"
            :loading="stockReportState"
            :disabled="disabled"
            size="mini"
            clearable
        >
            <el-option v-for="i in stockReport" :key="i[info.key]" :label="i[info.key] + ' ' + i[info.name]" :value="i[info.key]"> </el-option>
        </el-select>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

import Axios from '@/utils/request';
@Component({
    name: 'RiskEntryInputPlus',
})
export default class RiskEntryInputPlus extends Vue {
    // 针对需求选择可以参考element
    @Prop({ type: String }) placeholder!: string;
    @Prop() disabled!: boolean;
    @Prop() returnDatas!: any;
    @Prop({
        default: () => {
            return {
                url: '/fundInfo/list/byUser/like?fundCodeOrName=',
                method: 'get',
                data: {},
                filterValue: 'fundCodeOrName',
                // type:'params' // params或者query
            };
        },
    })
    requestParams: any;

    @Prop({
        default: () => {
            return {
                key: 'dictKey',
                name: 'dictKeyName',
            };
        },
    })
    info: any;
    // icon图标
    stockReport: any[] = [];
    entryCode: string = '';
    stockReportState: boolean = false;
    timer = null;

    @Watch('returnDatas', { immediate: true, deep: true })
    watchRetuen() {
        if (this.entryCode !== this.returnDatas || !this.returnDatas) {
            this.entryCode = this.returnDatas;
            this.getstockCodeList(this.returnDatas);
        }
    }

    /**
     * 下拉数据
     */
    getstockCodeList(val: any) {
        this.stockReportState = true;
        try {
            clearTimeout(this.timer);
        } catch (e) {}
        this.timer = setTimeout(() => {
            let { url, method, filterValue } = this.requestParams;
            // TODO
            if (url == '/fundInfo/list/byUser/like?fundCodeOrName=' || url == '/outFrame/userInfo/list/like?userCodeAndName=') {
                url = url + encodeURIComponent(val);
            }
            if (method == 'get') {
            } else if (method == 'post') {
                this.requestParams.data[filterValue] = val;
            }
            // 视情况进行补充
            Axios({ ...this.requestParams, url })
                .then((res: any) => {
                    this.stockReport = res;
                    this.stockReportState = false;
                })
                .catch(() => {
                    this.stockReportState = false;
                });
        }, 300);
    }

    /**
     * 一键清除
     */
    clearEntryCode() {
        this.entryCode = '';
        this.getstockCodeList('');
    }

    /**
     * 下拉框打开
     */
    handleVisibleChange(state: boolean) {
        if (!state && this.stockReport.length < 1) {
            this.getstockCodeList('');
        }
    }

    /**
     * 回调函数
     */
    setInputData() {
        this.$emit('set-entry-data', this.entryCode);
    }
}
</script>
<style lang="scss" scoped>
.icon-but {
    padding: 2px 8px !important;
    margin: 0;
    margin-right: 10px;

    & /deep/ .el-button--mini {
        padding: 2px 8px !important;
    }
}
</style>
